<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" href="./images/Logo.jpg" type="image/x-icon">
    <meta charset="UTF-8">
    <title>寻香 - 茶文化体验预约平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局样式 */
        * { box-sizing: border-box; }
        body {
            font-family: 'Arial', '微软雅黑', sans-serif;
            background-color: #f0f7f4;
            line-height: 1.6;
            padding: 0;
            color: #333;
            margin: 0;
        }

        /* 导航栏样式 */
        nav {
            background: #2d4538;
            padding: 1rem 2rem;
            display: flex;
            justify-content: center;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .nav-logo {
            display: none;
        }

        .nav-links {
            display: flex;
            text-decoration: none;
            gap: 8rem;
        }

        .nav-links a {
            color: white;
            font-size: 1.1rem;
            padding: 0.5rem 1rem;
            border-radius: 0;
            transition: background 0.3s ease;
            text-decoration: none;
        }

        .nav-links a:hover {
            background: #3d5a45;
        }

        /* 主容器 */
        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 80px 20px 20px; /* 增加顶部内边距，为固定导航栏留出空间 */
        }

        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 30px;
        }
        h1 {
            color: #2d4538;
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        .subtitle {
            color: #666;
            font-size: 1.2rem;
            font-style: italic;
        }

        /* 筛选区域 */
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .filter-title {
            font-size: 1.3rem;
            color: #2d4538;
            margin-bottom: 15px;
            border-bottom: 2px solid #e0f2f1;
            padding-bottom: 10px;
        }
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        .filter-group {
            margin-bottom: 15px;
        }
        .filter-group-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #2d4538;
        }
        .filter-btn {
            background: #f0f7f4;
            border: 1px solid #ddd;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .filter-btn:hover {
            background: #e0f2f1;
            border-color: #b2dfdb;
        }
        .filter-btn.active {
            background: #3c9d9b;
            color: white;
            border-color: #3c9d9b;
        }
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }
        .filter-clear {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 8px 15px;
            border-radius: 5px;
            margin-right: 10px;
            cursor: pointer;
        }
        .filter-apply {
            background: #3c9d9b;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        /* 茶馆卡片样式 */
        .tea-shops {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            max-width: 1200px;
            margin: 0 auto 30px;
        }
        .tea-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .tea-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .tea-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .tea-info {
            padding: 15px;
        }
        .tea-district {
            display: inline-block;
            font-size: 0.8rem;
            background: #e0f2f1;
            color: #00796b;
            padding: 3px 10px;
            border-radius: 20px;
            margin-bottom: 10px;
        }
        .tea-name {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 8px;
            color: #2d4538;
        }
        .tea-rating {
            color: #ff9800;
            margin-bottom: 8px;
        }
        .tea-price {
            font-weight: bold;
            color: #e65100;
            margin-bottom: 8px;
        }
        .tea-address {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        .tea-tags {
            margin-top: 10px;
        }
        .tea-tag {
            display: inline-block;
            background: #f5f5f5;
            padding: 3px 8px;
            border-radius: 15px;
            font-size: 0.8rem;
            margin-right: 5px;
            margin-bottom: 5px;
            color: #555;
        }
        
        /* 预约按钮样式 */
        .booking-btn {
            background: #3c9d9b;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            width: 100%;
            transition: background 0.3s ease;
        }
        .booking-btn:hover {
            background: #2d8a89;
        }
        
        /* 可预约时间样式 */
        .available-time, .available-people {
            font-size: 0.85rem;
            color: #666;
            margin: 5px 0;
        }
        
        /* 预约弹窗样式 */
        .booking-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .booking-modal.active {
            display: flex;
        }
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
        }
        .booking-form input, 
        .booking-form select, 
        .booking-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .booking-form button {
            background: #3c9d9b;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }

        /* 产品展示样式 */
        section {
            padding: 4rem 2rem;
            text-align: center;
        }

        .booking-container {
            max-width: 800px;
            margin: 2rem auto;
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .product-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: center;
        }

        .product {
            background: #fff;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 220px;
        }

        .product img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

        .divider {
            margin: 3rem auto;
            width: 60%;
            height: 2px;
            background: #3d5a45;
        }

        .info-section {
            max-width: 900px;
            margin: 0 auto;
            background: #f5f5dc;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
  /* 新增样式 */
  .left-align {
        text-align: left;
        margin-left: 20px;
    }
    
    /* 统一按钮样式 */
    .purchase-btn, .booking-btn {
        background: linear-gradient(135deg, #3c9d9b, #2d8a89);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 15px;
        width: 100%;
        transition: all 0.3s ease;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .purchase-btn:hover, .booking-btn:hover {
        background: linear-gradient(135deg, #2d8a89, #1c7978);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    /* 统一表单样式 */
    .purchase-form input,
    .purchase-form select,
    .booking-form input,
    .booking-form select,
    .booking-form textarea {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        background-color: #fff;
        transition: border-color 0.3s ease;
    }
    
    .purchase-form input:focus,
    .purchase-form select:focus,
    .booking-form input:focus,
    .booking-form select:focus,
    .booking-form textarea:focus {
        border-color: #3c9d9b;
        outline: none;
        box-shadow: 0 0 5px rgba(60, 157, 155, 0.3);
    }
    
    #price-display {
        font-size: 1.2rem;
        color: #e65100;
        margin: 15px 0;
        font-weight: bold;
    }
    .address-group {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 1fr;
            margin-bottom: 15px;
        }
        .address-group select {
            width: 100%;
        }
    </style>
 </head><body>
    <!-- 导航栏 -->
    <nav>
        <div class="nav-logo">寻香茶</div>
        <div class="nav-links">
            <a href="menu.html">首页</a>
            <a href="#tea-reserve">茶区预订</a>
            <a href="#tea-shop">茶叶购买</a>
            <a href="#tea-wares">茶具文创</a>
        </div>
    </nav>

    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>寻香———茶文化体验预约平台</h1>
            <div class="subtitle">探索四大茶区，品味地道茶文化</div>
        </div>

            <!-- 筛选区域 -->
            <div class="filter-section">
                <div class="filter-title">筛选条件</div>
                
                <div class="filter-group">
                    <div class="filter-group-title">茶区</div>
                    <div class="filter-options">
                        <button class="filter-btn active">全部</button>
                        <button class="filter-btn">江南茶区</button>
                        <button class="filter-btn">江北茶区</button>
                        <button class="filter-btn">西南茶区</button>
                        <button class="filter-btn">华南茶区</button>
                    </div>
                </div>
                
                <div class="filter-group">
                    <div class="filter-group-title">价格区间</div>
                    <div class="filter-options">
                        <button class="filter-btn">100元以下</button>
                        <button class="filter-btn">100-200元</button>
                        <button class="filter-btn">200-300元</button>
                        <button class="filter-btn">300元以上</button>
                    </div>
                </div>
                

                <div class="filter-actions">
                    <button class="filter-clear">清空筛选</button>
                    <button class="filter-apply">应用筛选</button>
                </div>
            </div>

        <!-- 茶区预订部分 -->
        <section id="tea-reserve">
            <!-- 茶馆列表 -->
            <div class="tea-shops">
                <!-- 江北茶区 -->
            <div class="tea-card">
                <img src="./images/信阳茶舍.jpg" alt="信阳茶舍" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">江北茶区</span>
                    <div class="tea-name">信阳茶舍</div>
                    <div class="tea-rating">★★★★☆ 4.4 (1256条评价)</div>
                    <div class="tea-price">¥120/人</div>
                    <div class="tea-address">河南省信阳市浉河区鸡公山路</div>
                    <div class="tea-tags">
                        <span class="tea-tag">茶馆</span>
                        <span class="tea-tag">信阳毛尖</span>
                        <span class="tea-tag">茶艺表演</span>
                    </div>
                    <div class="available-time">可预约时间: 09:30-19:00</div>
                    <div class="available-people">今日还可预约人数: 6人</div>
                    <button class="booking-btn booking-btn-tea">立即预约</button>
                </div>
            </div>
            
            <div class="tea-card">
                <img src="./images/日照绿茶馆.jpg" alt="日照绿茶馆" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">江北茶区</span>
                    <div class="tea-name">日照绿茶馆</div>
                    <div class="tea-rating">★★★★☆ 4.3 (986条评价)</div>
                    <div class="tea-price">¥110/人</div>
                    <div class="tea-address">山东省日照市东港区太公路</div>
                    <div class="tea-tags">
                        <span class="tea-tag">茶馆</span>
                        <span class="tea-tag">日照绿茶</span>
                        <span class="tea-tag">茶点精致</span>
                    </div>
                    <div class="available-time">可预约时间: 10:00-18:30</div>
                    <div class="available-people">今日还可预约人数: 9人</div>
                    <button class="booking-btn">立即预约</button>
                </div>
            </div>

                 <!-- 西南茶区 -->
            <div class="tea-card">
                <img src="./images/普洱茶馆.jpg" alt="普洱茶馆" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">西南茶区</span>
                    <div class="tea-name">云南普洱茶馆</div>
                    <div class="tea-rating">★★★★★ 4.7 (2103条评价)</div>
                    <div class="tea-price">¥180/人</div>
                    <div class="tea-address">云南省普洱市思茅区茶马古道</div>
                    <div class="tea-tags">
                        <span class="tea-tag">茶馆</span>
                        <span class="tea-tag">普洱茶</span>
                        <span class="tea-tag">茶艺表演</span>
                        <span class="tea-tag">茶道体验</span>
                    </div>
                    <div class="available-time">可预约时间: 09:00-20:00</div>
                        <div class="available-people">今日还可预约人数: 20人</div>
                        <button class="booking-btn">立即预约</button>
                    </div>
                </div>
                <!-- 江南茶区 -->
                <div class="tea-card">
                    <img src="./images/茶舍.jpg" alt="对白茶舍" class="tea-image">
                    <div class="tea-info">
                        <span class="tea-district">江南茶区</span>
                        <div class="tea-name">对白茶舍</div>
                        <div class="tea-rating">★★★★☆ 4.5 (1917条评价)</div>
                        <div class="tea-price">¥130/人</div>
                        <div class="tea-address">杭州市西湖区龙井路附近</div>
                        <div class="tea-tags">
                            <span class="tea-tag">茶馆</span>
                            <span class="tea-tag">龙井/虎跑</span>
                            <span class="tea-tag">景点内</span>
                        </div>
                        <div class="available-time">可预约时间: 09:00-18:00</div>
                        <div class="available-people">今日还可预约人数: 10人</div>
                        <button class="booking-btn booking-btn-tea">立即预约</button>
                    </div>
                </div>
                
                <div class="tea-card">
                    <img src="./images/茶馆.jpg" alt="梦华录茶馆" class="tea-image">
                    <div class="tea-info">
                        <span class="tea-district">江南茶区</span>
                        <div class="tea-name">梦华录茶馆</div>
                        <div class="tea-rating">★★★★★ 4.8 (2356条评价)</div>
                        <div class="tea-price">¥168/人</div>
                        <div class="tea-address">杭州市西湖区满觉陇路18号</div>
                        <div class="tea-tags">
                            <span class="tea-tag">茶馆</span>
                            <span class="tea-tag">龙井村</span>
                            <span class="tea-tag">茶园体验</span>
                        </div>
                        <div class="available-time">可预约时间: 10:00-20:00</div>
                        <div class="available-people">今日还可预约人数: 15人</div>
                        <button class="booking-btn">立即预约</button>
                    </div>
                </div>
                <div class="tea-card">
                    <img src="./images/茶园.jpg" alt="九溪烟树茶园" class="tea-image">
                    <div class="tea-info">
                        <span class="tea-district">江南茶区</span>
                        <div class="tea-name">九溪烟树茶园</div>
                        <div class="tea-rating">★★★★☆ 4.6 (1588条评价)</div>
                        <div class="tea-price">¥150/人</div>
                        <div class="tea-address">杭州市西湖区九溪路龙井茶园内</div>
                        <div class="tea-tags">
                            <span class="tea-tag">茶园</span>
                            <span class="tea-tag">九溪十八涧</span>
                            <span class="tea-tag">私房菜</span>
                        </div>
                        <div class="available-time">可预约时间: 08:30-17:30</div>
                        <div class="available-people">今日还可预约人数: 8人</div>
                        <button class="booking-btn">立即预约</button>
                    </div>
                </div>

                
            <!-- 华南茶区 -->
            <div class="tea-card">
                <img src="./images/荷沐茶香花文化传播中心.jpg" alt="荷沐茶香花文化传播中心" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">华南茶区</span>
                    <div class="tea-name">荷沐茶香花文化传播中心</div>
                    <div class="tea-rating">★★★★☆ 4.4 (61条评论)</div>
                    <div class="tea-price">¥38/人</div>
                    <div class="tea-address">福建省泉州市南关十字</div>
                    <div class="tea-tags">
                        <span class="tea-tag">茶艺</span>
                        <span class="tea-tag">香道培训</span>
                        <span class="tea-tag">免费试心</span>
                    </div>
                    <div class="available-time">可预约时间: 09:30-18:30</div>
                    <div class="available-people">今日还可预约人数: 8人</div>
                    <button class="booking-btn">立即预约</button>
                </div>
            </div>
            <div class="tea-card">
                <img src="./images/茶义·武夷工夫茶馆.jpg" alt="茶义·武夷工夫茶馆" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">华南茶区</span>
                    <div class="tea-name">茶义·武夷工夫茶馆</div>
                    <div class="tea-rating">★★★★★ 4.6 (11条评论)</div>
                    <div class="tea-price">¥58/人</div>
                    <div class="tea-address">福建省武夷山兰溪西站</div>
                    <div class="tea-tags">
                        <span class="tea-tag">奶茶</span>
                        <span class="tea-tag">果汁</span>
                        <span class="tea-tag">武夷岩茶</span>
                    </div>
                    <div class="available-time">可预约时间: 10:00-20:00</div>
                    <div class="available-people">今日还今日还可预约人数: 5人</div>
                    <button class="booking-btn">立即预约</button>
                </div>
            </div>
            <div class="tea-card">
                <img src="./images/6茶共享茶室.jpg" alt="6茶共享茶室" class="tea-image">
                <div class="tea-info">
                    <span class="tea-district">华南茶区</span>
                    <div class="tea-name">6茶共享茶室(东方红广场店)</div>
                    <div class="tea-rating">★★★★★ 5.0 (259条评论)</div>
                    <div class="tea-price">¥49.9/人</div>
                    <div class="tea-address">福建省东方红广场</div>
                    <div class="tea-tags">
                        <span class="tea-tag">茶馆</span>
                        <span class="tea-tag">24小时营业</span>
                        <span class="tea-tag">免费甜品</span>
                    </div>
                    <div class="available-time">可预约时间: 全天24小时</div>
                    <div class="available-people">今日还可预约人数: 12人</div>
                    <button class="booking-btn">立即预约</button>
                </div>
            </div>
        </div>
    </section>
    <div class="divider"></div>

    <section id="tea-shop">
        <div class="booking-container">
            <h2>茶叶购买</h2>
            <div class="product-grid">
                <div class="product">
                    <img src="./images/龙井.jpg" alt="龙井茶">
                    <h3>龙井茶</h3>
                    <p>价格：¥120 / 100g</p>
                </div>
                <div class="product">
                    <img src="./images/普洱.jpg" alt="普洱茶">
                    <h3>普洱茶</h3>
                    <p>价格：¥90 / 100g</p>
                </div>
                <div class="product">
                    <img src="./images/铁观音.jpg" alt="铁观音">
                    <h3>铁观音</h3>
                    <p>价格：¥100 / 100g</p>
                </div>
                <div class="product">
                    <img src="./images/蒙顶黄芽.png" alt="蒙顶黄芽">
                    <h3>蒙顶黄芽</h3>
                    <p>价格：¥110 / 100g</p>
                </div>
                <div class="product">
                    <img src="./images/乌龙茶.jpg" alt="乌龙茶">
                    <h3>乌龙茶</h3>
                    <p>价格：¥80 / 100g</p>
                </div>
                <div class="product">
                    <img src="./images/白毫银针.png" alt="白毫银针">
                    <h3>白毫银针</h3>
                    <p>价格：¥120 / 100g</p>
                </div>
                <button class="purchase-btn">立即购买</button>
            </div>
        </div>
    </section>

    <!-- 新增的购买弹窗 -->
    <div class="booking-modal" id="purchase-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>茶叶购买</h2>
            <form class="purchase-form">
                <select id="tea-type" required>
                    <option value="">选择茶种类</option>
                    <!-- 选项由JavaScript动态生成 -->
                </select>
                <input type="number" id="quantity" min="100" step="100" placeholder="请输入购买克数（100g为单位）" required>
                <div id="price-display">总价：¥0</div>
                <div class="address-group">
                    <select id="province" required>
                        <option value="">选择省份</option>
                    </select>
                    <select id="city" required disabled>
                        <option value="">先选择省份</option>
                    </select>
                </div>
                <input type="text" placeholder="详细地址" required>
                <input type="text" placeholder="收货人姓名" required>
                <input type="tel" placeholder="联系电话" required>
                <button type="button" id="payment-btn" class="purchase-btn">立即支付</button>
            </form>
        </div>
    </div>

    <div class="info-section">
        <h2>茶叶挑选指南</h2>
        <p>不同茶叶有不同的口感和功效，例如龙井茶清香扑鼻，普洱茶醇厚耐泡，铁观音带有兰花香。选择适合自己的茶，让品茶更具乐趣！</p>
    </div>

    <div class="divider"></div>

    <section id="tea-wares">
        <div class="booking-container">
            <h2>茶具文创购买</h2>
            <div class="product-grid">
                <div class="product">
                    <img src="./images/紫砂壶.png" alt="茶壶">
                    <h2>紫砂茶壶</h2>
                    <p>价格：¥350</p>
                </div>
                <div class="product">
                    <img src="./images/茶宠.jpg" alt="茶宠">
                    <h2>茶宠</h2>
                    <p>价格：¥50</p>
                </div>
                <button class="purchase-btn cultural-btn">立即购买</button>
            </div>
        </div>
    </section>
<!-- 文创购买弹窗 -->

    <div class="booking-modal" id="cultural-modal">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>文创购买</h2>
        <form class="purchase-form" id="creative-purchase-form">
            <select name="creative-type" id="creative-type" required>
                <option value="">选择文创种类</option>
                <option value="50">茶宠</option>
                <option value="350">紫砂茶壶</option>
            </select>
            <input type="number" name="creative-amount" id="cultural-quantity" min="1" value="1" placeholder="请输入购买个数" required>
            <div id="creative-price-display" style="color: #e65100;margin:15px 0;font-weight:bold; font-size: 1.2rem;">总价：¥0</div>
            <div class="address-group">
                <select name="province" id="creative-province-select" required>
                    <option value="">选择省份</option>
                </select>
                <select name="city" id="creative-city-select" required disabled>
                    <option value="">先选择省份</option>
                </select>
            </div>
            <input type="text" name="address" placeholder="详细地址" required>
            <input type="text" name="receiver" placeholder="收货人姓名" required>
            <input type="tel" name="phone" placeholder="联系电话" required>
            <button type="submit" class="purchase-btn" id="cultural-payment-btn">立即支付</button>
        </form>
    </div>
</div>
  
    <!-- 预约弹窗 -->
    <div class="booking-modal" id="booking-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>预约茶文化体验</h2>
            <form class="booking-form">
                <input type="text" placeholder="姓名" required>
                <input type="tel" placeholder="手机号码" required>
                <input type="email" placeholder="邮箱" required>
                <input type="date" placeholder="预约日期" required>
                <select required>
                    <option value="">选择时间段</option>
                    <option value="morning">上午 (09:00-12:00)</option>
                    <option value="afternoon">下午 (13:00-17:00)</option>
                    <option value="evening">晚上 (18:00-20:00)</option>
                </select>
                <input type="number" placeholder="预约人数" min="1" required>
                <textarea placeholder="备注（可选）" rows="3"></textarea>
                <button type="submit">确认预约</button>
            </form>
        </div>
    </div>

    <script>
        // 获取弹窗元素
        const modal = document.getElementById('booking-modal');
        const bookingBtns = document.querySelectorAll('.booking-btn-tea');
        const closeModal = document.querySelector('.close-modal');
        
        // 点击预约按钮打开弹窗
        const allBookingBtns = document.querySelectorAll('.booking-btn');
        allBookingBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                modal.classList.add('active');
            });
        });
        
        // 点击关闭按钮关闭弹窗
        closeModal.addEventListener('click', function() {
            modal.classList.remove('active');
        });
        
        // 点击弹窗外部关闭弹窗
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.classList.remove('active');
            }
        });
        
        // 表单提交处理
        const bookingForm = document.querySelector('.booking-form');
        bookingForm.addEventListener('submit', function(event) {
            event.preventDefault();
            alert('预约成功！我们会尽快与您联系确认详情。');
            modal.classList.remove('active');
        });

        // 筛选功能实现
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM加载完成，开始初始化筛选功能');

            // 获取所有筛选按钮和卡片
            const teaCards = document.querySelectorAll('.tea-card');
            const filterGroups = document.querySelectorAll('.filter-group');
            const districtButtons = filterGroups[0].querySelectorAll('.filter-btn');
            const priceButtons = filterGroups[1].querySelectorAll('.filter-btn');
            const clearFilterBtn = document.querySelector('.filter-clear');
            const applyFilterBtn = document.querySelector('.filter-apply');
            
            console.log('筛选组数量:', filterGroups.length);
            console.log('茶区按钮数量:', districtButtons.length);
            console.log('价格按钮数量:', priceButtons.length);
            console.log('茶馆卡片数量:', teaCards.length);

            let selectedDistrict = '全部';
            let selectedPriceRange = null;

            // 为茶区按钮添加点击事件
            districtButtons.forEach(button => {
                button.addEventListener('click', function() {
                    console.log('点击了茶区按钮:', this.textContent);
                    districtButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    selectedDistrict = this.textContent;
                });
            });

            // 为价格按钮添加点击事件
            priceButtons.forEach(button => {
                button.addEventListener('click', function() {
                    console.log('点击了价格按钮:', this.textContent);
                    if (this.classList.contains('active')) {
                        this.classList.remove('active');
                        selectedPriceRange = null;
                    } else {
                        priceButtons.forEach(btn => btn.classList.remove('active'));
                        this.classList.add('active');
                        selectedPriceRange = this.textContent;
                    }
                    console.log('选中的价格区间:', selectedPriceRange);
                });
            });

            // 清空筛选
            clearFilterBtn.addEventListener('click', function() {
                console.log('清空筛选');
                selectedDistrict = '全部';
                selectedPriceRange = null;
                districtButtons.forEach(btn => btn.classList.remove('active'));
                priceButtons.forEach(btn => btn.classList.remove('active'));
                districtButtons[0].classList.add('active');
                teaCards.forEach(card => card.style.display = '');
            });

            // 应用筛选
            applyFilterBtn.addEventListener('click', function() {
                console.log('应用筛选 - 选中的茶区:', selectedDistrict, '价格区间:', selectedPriceRange);

                teaCards.forEach(card => {
                    const district = card.querySelector('.tea-district').textContent.trim();
                    const priceText = card.querySelector('.tea-price').textContent;
                    // 改进价格提取的正则表达式，匹配价格中的数字部分
                    const priceMatch = priceText.match(/¥(\d+(\.\d+)?)/);
                    const price = priceMatch ? parseFloat(priceMatch[1]) : 0;
                    console.log('提取的价格:', price, '原始文本:', priceText);

                    console.log('卡片信息 - 茶区:', district, '价格:', price);

                    let showCard = true;

                    // 茶区筛选
                    if (selectedDistrict !== '全部' && district !== selectedDistrict) {
                        showCard = false;
                        console.log('茶区不匹配:', district, '!=', selectedDistrict);
                    }

                    // 价格筛选
                    if (selectedPriceRange) {
                        const ranges = {
                            '100元以下': [0, 99],
                            '100-200元': [100, 200],
                            '200-300元': [200, 300],
                            '300元以上': [300, Infinity]
                        };
                        
                        const range = ranges[selectedPriceRange];
                        if (range && (price < range[0] || price > range[1])) {
                            showCard = false;
                            console.log('价格不匹配:', price, '不在范围', range[0], '-', range[1]);
                        }
                    }

                    card.style.display = showCard ? '' : 'none';
                    console.log('卡片显示状态:', showCard);
                });
            });
            
            // 初始化
            // 确保全部按钮默认被选中
            districtButtons[0].classList.add('active');
            
            // 初始化时立即执行一次筛选
            setTimeout(() => {
                console.log('初始化筛选状态');
                applyFilterBtn.click();
            }, 500);
        });
    
     document.addEventListener('DOMContentLoaded', function() {
        // 动态填充茶叶种类
        const teaProducts = document.querySelectorAll('.product');
        const teaTypeSelect = document.getElementById('tea-type');
        teaProducts.forEach(product => {
            const option = document.createElement('option');
            const name = product.querySelector('h3').textContent;
            const price = product.querySelector('p').textContent.match(/\d+/)[0];
            option.value = price;
            option.textContent = name;
            teaTypeSelect.appendChild(option);
        });
    });
        // 动态填充省份
        const provinceCityData = {
    "北京市": ["北京市"],
    "天津市": ["天津市"],
    "上海市": ["上海市"],
    "重庆市": ["重庆市"],
    "河北省": [
        "石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市",
        "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"
    ],
    "山西省": [
        "太原市", "大同市", "阳泉市", "长治市", "晋城市",
        "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"
    ],
    "内蒙古自治区": [
        "呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市",
        "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市",
        "兴安盟", "锡林郭勒盟", "阿拉善盟"
    ],
    "辽宁省": [
        "沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市",
        "丹东市", "锦州市", "营口市", "阜新市", "辽阳市",
        "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"
    ],
    "吉林省": [
        "长春市", "吉林市", "四平市", "辽源市", "通化市",
        "白山市", "松原市", "白城市", "延边朝鲜族自治州"
    ],
    "黑龙江省": [
        "哈尔滨市", "齐齐哈尔市", "鸡西市", "鹤岗市", "双鸭山市",
        "大庆市", "伊春市", "佳木斯市", "七台河市", "牡丹江市",
        "黑河市", "绥化市", "大兴安岭地区"
    ],
    "江苏省": [
        "南京市", "无锡市", "徐州市", "常州市", "苏州市",
        "南通市", "连云港市", "淮安市", "盐城市", "扬州市",
        "镇江市", "泰州市", "宿迁市"
    ],
    "浙江省": [
        "杭州市", "宁波市", "温州市", "嘉兴市", "湖州市",
        "绍兴市", "金华市", "衢州市", "舟山市", "台州市", "丽水市"
    ],
    "安徽省": [
        "合肥市", "芜湖市", "蚌埠市", "淮南市", "马鞍山市",
        "淮北市", "铜陵市", "安庆市", "黄山市", "滁州市",
        "阜阳市", "宿州市", "六安市", "亳州市", "池州市", "宣城市"
    ],
    "福建省": [
        "福州市", "厦门市", "莆田市", "三明市", "泉州市",
        "漳州市", "南平市", "龙岩市", "宁德市"
    ],
    "江西省": [
        "南昌市", "景德镇市", "萍乡市", "九江市", "新余市",
        "鹰潭市", "赣州市", "吉安市", "宜春市", "抚州市", "上饶市"
    ],
    "山东省": [
        "济南市", "青岛市", "淄博市", "枣庄市", "东营市",
        "烟台市", "潍坊市", "济宁市", "泰安市", "威海市",
        "日照市", "临沂市", "德州市", "聊城市", "滨州市", "菏泽市"
    ],
    "河南省": [
        "郑州市", "开封市", "洛阳市", "平顶山市", "安阳市",
        "鹤壁市", "新乡市", "焦作市", "濮阳市", "许昌市",
        "漯河市", "三门峡市", "南阳市", "商丘市", "信阳市", "周口市", "驻马店市"
    ],
    "湖北省": [
        "武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市",
        "鄂州市", "荆门市", "孝感市", "荆州市", "黄冈市",
        "咸宁市", "随州市", "恩施土家族苗族自治州", "仙桃市", "潜江市", "天门市", "神农架林区"
    ],
    "湖南省": [
        "长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市",
        "岳阳市", "常德市", "张家界市", "益阳市", "郴州市",
        "永州市", "怀化市", "娄底市", "湘西土家族苗族自治州"
    ],
    "广东省": [
        "广州市", "韶关市", "深圳市", "珠海市", "汕头市",
        "佛山市", "江门市", "湛江市", "茂名市", "肇庆市",
        "惠州市", "梅州市", "汕尾市", "河源市", "阳江市",
        "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"
    ],
    "广西壮族自治区": [
        "南宁市", "柳州市", "桂林市", "梧州市", "北海市",
        "防城港市", "钦州市", "贵港市", "玉林市", "百色市",
        "贺州市", "河池市", "来宾市", "崇左市"
    ],
    "海南省": [
        "海口市", "三亚市", "三沙市", "儋州市",
        // 地级市
        "五指山市", "琼海市", "文昌市", "万宁市", "东方市",
        // 省直辖县级市
        "定安县", "屯昌县", "澄迈县", "临高县",
        "白沙黎族自治县", "昌江黎族自治县",
        "乐东黎族自治县", "陵水黎族自治县",
        "保亭黎族苗族自治县", "琼中黎族苗族自治县"
    ],
    "四川省": [
        "成都市", "自贡市", "攀枝花市", "泸州市", "德阳市",
        "绵阳市", "广元市", "遂宁市", "内江市", "乐山市",
        "南充市", "眉山市", "宜宾市", "广安市", "达州市",
        "雅安市", "巴中市", "资阳市", "阿坝藏族羌族自治州",
        "甘孜藏族自治州", "凉山彝族自治州"
    ],
    "贵州省": [
        "贵阳市", "六盘水市", "遵义市", "安顺市",
        "毕节市", "铜仁市", "黔西南布依族苗族自治州",
        "黔东南苗族侗族自治州", "黔南布依族苗族自治州"
    ],
    "云南省": [
        "昆明市", "曲靖市", "玉溪市", "保山市", "昭通市",
        "丽江市", "普洱市", "临沧市", "楚雄彝族自治州",
        "红河哈尼族彝族自治州", "文山壮族苗族自治州",
        "西双版纳傣族自治州", "大理白族自治州",
        "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州"
    ],
    "西藏自治区": [
        "拉萨市", "日喀则市", "昌都市", "林芝市",
        "山南市", "那曲市", "阿里地区"
    ],
    "陕西省": [
        "西安市", "铜川市", "宝鸡市", "咸阳市", "渭南市",
        "延安市", "汉中市", "榆林市", "安康市", "商洛市"
    ],
    "甘肃省": [
        "兰州市", "嘉峪关市", "金昌市", "白银市", "天水市",
        "武威市", "张掖市", "平凉市", "酒泉市", "庆阳市",
        "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州"
    ],
    "青海省": [
        "西宁市", "海东市", "海北藏族自治州", "黄南藏族自治州",
        "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"
    ],
    "宁夏回族自治区": [
        "银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"
    ],
    "新疆维吾尔自治区": [
        "乌鲁木齐市", "克拉玛依市", "吐鲁番市", "哈密市",
        "昌吉回族自治州", "博尔塔拉蒙古自治州", "巴音郭楞蒙古自治州",
        "阿克苏地区", "克孜勒苏柯尔克孜自治州", "喀什地区",
        "和田地区", "伊犁哈萨克自治州", "塔城地区", "阿勒泰地区"
    ],
        "台湾省": [
        "台北市", "高雄市", "基隆市", "台中市", "台南市",
        "新竹市", "嘉义市", "新北市", "桃园市"
    ],
    "香港特别行政区": ["香港特别行政区"],
    "澳门特别行政区": ["澳门特别行政区"]
    };
    document.addEventListener('DOMContentLoaded', function() {
        // 省市联动功能
        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');

        // 初始化省份
        Object.keys(provinceCityData).forEach(province => {
            const option = document.createElement('option');
            option.value = province;
            option.textContent = province;
            provinceSelect.appendChild(option);
        });

        // 省份改变事件
        provinceSelect.addEventListener('change', function() {
            citySelect.innerHTML = '<option value="">选择城市</option>';
            citySelect.disabled = !this.value;
            
            if (this.value && provinceCityData[this.value]) {
                provinceCityData[this.value].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });
    
        // 价格计算功能
        function calculateTotal() {
            const price = parseFloat(document.getElementById('tea-type').value) || 0;
            const quantity = parseFloat(document.getElementById('quantity').value) || 0;
            const total = (price * quantity) / 100;
            document.getElementById('price-display').textContent = `总价：¥${total.toFixed(2)}`;
        }

        document.getElementById('tea-type').addEventListener('change', calculateTotal);
        document.getElementById('quantity').addEventListener('input', calculateTotal);

        // 弹窗控制
        document.querySelectorAll('.purchase-btn:not(.cultural-btn)').forEach(btn => {
            btn.addEventListener('click', () => {
                document.getElementById('purchase-modal').classList.add('active');
            });
        });
        
        // 文创购买按钮点击事件
        document.querySelectorAll('.cultural-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.getElementById('cultural-modal').classList.add('active');
            });
        });

        document.querySelectorAll('.close-modal').forEach(btn => {
            btn.addEventListener('click', function() {
                // 获取最近的modal父元素并关闭它
                const modal = this.closest('.booking-modal');
                if (modal) {
                    modal.classList.remove('active');
                }
            });
        });

        // 支付按钮点击事件
        document.getElementById('payment-btn').addEventListener('click', () => {
            // 表单验证
            const form = document.querySelector('.purchase-form');
            const inputs = form.querySelectorAll('input[required], select[required]');
            let isValid = true;
            
            inputs.forEach(input => {
                if (!input.value.trim()) {
                    input.style.borderColor = 'red';
                    isValid = false;
                } else {
                    input.style.borderColor = '#ddd';
                }
            });

            if (!isValid) {
                alert('请填写所有必填信息！');
                return;
            }

            const teaType = document.getElementById('tea-type').value;
            const quantity = document.getElementById('quantity').value;
            const price = parseFloat(teaType) * parseFloat(quantity) / 100;
            const orderId = 'TEA' + Date.now() + Math.floor(Math.random() * 1000);
            const productName = document.getElementById('tea-type').options[document.getElementById('tea-type').selectedIndex].text;
            
            window.location.href = `pay.html?amount=${price}&orderId=${orderId}&productName=${encodeURIComponent(productName)}`;
        });
        
        // 文创支付按钮点击事件
        document.getElementById('cultural-payment-btn').addEventListener('click', (e) => {
            e.preventDefault();
            
            // 表单验证
            const form = document.getElementById('creative-purchase-form');
            const inputs = form.querySelectorAll('input[required], select[required]');
            let isValid = true;
            
            inputs.forEach(input => {
                if (!input.value.trim()) {
                    input.style.borderColor = 'red';
                    isValid = false;
                } else {
                    input.style.borderColor = '#ddd';
                }
            });

            if (!isValid) {
                alert('请填写所有必填信息！');
                return;
            }

            const creativeType = document.getElementById('creative-type').value;
            const quantity = document.getElementById('cultural-quantity').value;
            const price = parseFloat(creativeType) * parseFloat(quantity);
            const orderId = 'CUL' + Date.now() + Math.floor(Math.random() * 1000);
            const productName = document.getElementById('creative-type').options[document.getElementById('creative-type').selectedIndex].text;
            
            window.location.href = `pay.html?amount=${price}&orderId=${orderId}&productName=${encodeURIComponent(productName)}`;
        });
        
        // 文创产品省市联动
        const creativeProvinceSelect = document.getElementById('creative-province-select');
        const creativeCitySelect = document.getElementById('creative-city-select');
        
        // 初始化文创产品省份
        Object.keys(provinceCityData).forEach(province => {
            const option = document.createElement('option');
            option.value = province;
            option.textContent = province;
            creativeProvinceSelect.appendChild(option);
        });
        
        // 文创产品省份改变事件
        creativeProvinceSelect.addEventListener('change', function() {
            creativeCitySelect.innerHTML = '<option value="">选择城市</option>';
            creativeCitySelect.disabled = !this.value;
            
            if (this.value && provinceCityData[this.value]) {
                provinceCityData[this.value].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    creativeCitySelect.appendChild(option);
                });
            }
        });

        // 文创产品价格计算功能
        function calculateCulturalTotal() {
            const price = parseFloat(document.getElementById('creative-type').value) || 0;
            const quantity = parseFloat(document.getElementById('cultural-quantity').value) || 0;
            const total = price * quantity;
            document.getElementById('creative-price-display').textContent = `总价：¥${total.toFixed(2)}`;
        }
        
        document.getElementById('creative-type').addEventListener('change', calculateCulturalTotal);
        document.getElementById('cultural-quantity').addEventListener('input', calculateCulturalTotal);
        });
    </script>
</body>
</html>

